22:22 Aug 08 2011
Times Read: 505
/**
* @author Hakim El Hattab
*/
/*********************************************
* GLOBAL STYLES
*********************************************/
html, body {
width: 100%;
height: 100%;
background: #eee;
color: #eee;
font-family: 'Molengo', Arial, Helvetica, sans-serif;
}
/*********************************************
* BOX CONTENTS
*********************************************/
h1 {
padding: 40px;
font-size: 52px;
text-transform: uppercase;
}
p {
padding: 10px 40px 10px 40px;
font-size: 36px;
line-height: 120%;
}
/*********************************************
* THE 3D WORLD
*********************************************/
#world {
-webkit-perspective: 500px;
-webkit-perspective-origin: 50% 50%;
width: 100%;
height: 100%;
}
#room {
width: 600px;
height: 500px;
position: absolute;
left: 50%;
top: 45%;
margin-left: -300px;
margin-top: -250px;
}
#back,
#front,
#wall-left,
#wall-right,
#wall-top,
#wall-bottom {
position: absolute;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.45) inset;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.45) inset;
-o-box-shadow: 0 0 20px rgba(0, 0, 0, 0.45) inset;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.45) inset;
}
#back {
width: 600px;
height: 500px;
background: rgba(0,100,120,1);
text-align: center;
-webkit-transform: translateZ(-49px);
}
#front {
width: 600px;
height: 500px;
background: url('../assets/images/clouds.png') no-repeat bottom;
-webkit-transform: translateZ(50px);
}
#wall-left {
height: 500px;
width: 100px;
left: 0px;
background: #bbb;
-webkit-transform: translateX(-50px) rotate3d(0, 50, 0, 90deg);
}
#wall-right {
height: 500px;
width: 100px;
right: 0px;
background: #bbb;
-webkit-transform: translateX(50px) rotate3d(0, 50, 0, -90deg);
}
#wall-top {
height: 100px;
width: 600px;
top: 0px;
background: #999;
-webkit-transform: translateY(-50px) rotate3d(50, 0, 0, 90deg);
}
#wall-bottom {
height: 100px;
width: 600px;
bottom: 0px;
background: #999;
-webkit-transform: translateY(50px) rotate3d(50, 0, 0, -90deg);
}
#shadow {
position: absolute;
width: 600px;
height: 100px;
background: rgba(0,0,0,0.2);
border-radius: 8px;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.45);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.45);
-o-box-shadow: 0 0 20px rgba(0, 0, 0, 0.45);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.45);
-webkit-transform: translate3d(0, 550px, -10px) rotateX(70deg);
}
COMMENTS
-